<template>
	<Select
		ref="elSelect"
		:key="key"
		v-model="valueTitle"
		:clearable="clearable"
		:disabled="disabled"
		:placeholder="placeholder"
		:popper-class="`mc-select-tree`"
		:filterable="filterable"
		:filter-method="selectFilter"
		class="mc-selectTree"
		:multiple="multiple"
		:collapse-tags="collapseTags"
		:popper-append-to-body="false"
		@clear="clearHandle"
		@focus="selectFocus"
		@visible-change="visibleChange"
		@remove-tag="removeTag"
	>
		<slot name="header"/>
		<Option
			v-for="item in selectOptions"
			:key="item.id"
			:label="item[props.label]"
			:value="item[props.value]"
			style="display: none"
		/>
		<Option
			:value="optionTitle"
			:label="optionTitle"
			class="options"
		>
			<Tree
				v-show="options.length"
				id="tree-option"
				ref="selectTree"
				:accordion="accordion"
				:data="options"
				:default-expand-all="defaultExpandAll"
				:props="props"
				:node-key="props.value"
				:default-expanded-keys="defaultExpandedKey"
				:filter-node-method="filterNode"
				:show-checkbox="multiple"
				:check-on-click-node="multiple"
				:class="{ single: !multiple }"
				:expand-on-click-node="!multiple"
				@node-click="handleNodeClick"
				@check="check"
			>
				<template #default="{ node, data }">
					<span
						class="custom-tree-node"
						:class="{ 'is-disabled': data.disabled }"
					>
						<slot :data="{ node, data }">
							<i
								v-if="data.icon"
								:class="data.icon"
							/>
							<span class="text">{{node.label}}</span>
						</slot>
					<!-- 自定义slot示例 开始 -->
					<!-- <template slot-scope="{data}">
            <i :class="data.data.icon"></i>
            <span class="text">{{data.node.label}}</span>
          </template> -->
					<!-- 自定义slot示例 结束 -->
					</span>
				</template>
			</Tree>
			<div
				v-show="!options.length"
				class="empty-text"
			>
				无数据
			</div>
		</Option>
	</Select>
</template>

<script>
import {Select,Option,Tree} from 'element-ui';
let isFirst = 1;
export default {
	name:'McTreeSelect',
	components:{
		Select,Option,Tree
	},
	props:{
        // 在过滤条件时候传true,设置不显示根节点标题
		conditionFilter:{type:Boolean, default:false},
        // 配置项
		props:{
			type:Object,
			default: () => ({
				value:'id', // ID字段名
				label:'fullName', // 显示名称
				children:'children', // 子级字段名
				disabled:function(data){
					return data.disabled;
				},
			}),
		},
        // 是否禁用
		disabled:{type:Boolean, default:false},
        // 选项列表数据(树形结构的对象数组)
		options:{type:Array, default: () => []},
		placeholder:{type:String, default:'请选择'},
        // 初始值
		value:{
			type:[String, Number, Array],
		},
        // 可清空选项
		clearable:{type:Boolean, default:false},
        // 能否搜索
		filterable:{type:Boolean, default:true},
        // 只能选择最后一层的数值
		lastLevel:{type:Boolean, default:false},
        // 只能选择最后一层的数值时，需要根据 lastLevelKey来判断是否最后一层
		lastLevelKey:{type:String, default:'hasChildren'},
		lastLevelValue:{default:false},
        // 自动收起
		accordion:{type:Boolean, default:false},
		defaultExpandAll:{type:Boolean, default:true},
		multiple:{type:Boolean, default:false}, // 是否多选，默认单选
		collapseTags:{
			type:Boolean,
			default:false,
		},
		isDataInterface:{
			type:Number,
			default:0,
		},
	},
	data(){
		return {
			valueTitle:'',
			defaultExpandedKey:[],
			selectOptions:[],
			optionTitle:'',
			key:+new Date(),
		};
	},
	watch:{
		value(){
			this.initHandle();
		},
		multiple(){
			this.key = +new Date();
		},
		options(){
			if(this.value)this.initHandle();
		},
	},
	mounted(){
		if(this.value){
			this.initHandle();
		}
	},
	methods:{
		visibleChange(val){
			this.$emit('visible-change', val);
		},
		selectFilter(val){
			if(this.options.length)this.$refs.selectTree.filter(val);
		},
		filterNode(value, data){
			if(!value) return true;
			return data[this.props.label].indexOf(value) !== -1;
		},
		selectFocus(){
			if(this.isDataInterface === 1){
				this.$emit('select-change');
			}
			this.initHandle();
			if(isFirst && this.$refs.elSelect){
				isFirst = 0;
				this.$refs.elSelect.focus();
				this.$nextTick(() => {
					this.$refs.elSelect.blur();
				});
			}
		},
        // 初始化值
		initHandle(){
			this.$refs.selectTree.filter('');
			if(this.value){
				if(this.multiple){
					setTimeout(() => {
						let titleList = [];
						this.$refs.selectTree.setCheckedKeys(this.value);
						if(this.lastLevel){
							titleList = this.$refs.selectTree.getCheckedNodes(true);
						}else{
							titleList = this.$refs.selectTree.getCheckedNodes(this.conditionFilter);
						}
						this.selectOptions = titleList;
						this.valueTitle = titleList.map((o) => o[this.props.value]);
					}, 10);
				}else{
					setTimeout(() => {
						this.valueTitle = this.$refs.selectTree.getNode(this.value)
							? this.$refs.selectTree.getNode(this.value).data[this.props.label]
							: ''; // 初始化显示
						this.$refs.selectTree.setCurrentKey(this.value); // 设置默认选中
						this.defaultExpandedKey = [this.value]; // 设置默认展开
					}, 10);
				}
			}else{
				if(this.multiple){
					this.valueTitle = [];
					this.$refs.selectTree.setCheckedKeys([]);
				}else{
					this.valueTitle = '';
					this.$refs.selectTree.setCurrentKey(null);
				}
			}
			this.initScroll();
		},
        // 初始化滚动条
		initScroll(){
			this.$nextTick(() => {
				const list = document.querySelectorAll(
					'.mc-select-tree .el-scrollbar .el-select-dropdown__wrap',
				);
                // 有多个下拉框，造成页面错位
				const index = list.length - 1;
				const scrollWrap = list[index];
				const scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar');
				scrollWrap.style
				&& (scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;');
				for(let i = 0; i < scrollBar.length; i++){
					scrollBar[i].style.width = 0;
				}
			});
		},
        // 单选切换选项
		handleNodeClick(node){
			if(node.disabled) return;
			if(!this.multiple){
				if(
					this.lastLevel
					&& node[this.lastLevelKey] != undefined
					&& node[this.lastLevelKey] != this.lastLevelValue
				){
					return;
				}
				this.valueTitle = node[this.props.label];
				this.$emit('input', node[this.props.value], node);
				this.$emit('change', node[this.props.value], node);
				this.defaultExpandedKey = [];
				this.$refs.elSelect.blur();
			}
		},
        // 多选选择
		check(node){
			if(!this.multiple) return;
			const selectedData = [];
			const titleList = [];
			let selectedTextData = [];
			if(this.lastLevel){
				selectedTextData = this.$refs.selectTree.getCheckedNodes(true);
				for(let i = 0; i < selectedTextData.length; i++){
					const e = selectedTextData[i];
					if(e[this.lastLevelKey] == this.lastLevelValue){
						selectedData.push(e[this.props.value]);
						titleList.push(e[this.props.label]);
					}
				}
			}else{
				selectedTextData = this.$refs.selectTree.getCheckedNodes();
				for(let i = 0; i < selectedTextData.length; i++){
					const e = selectedTextData[i];
					selectedData.push(e[this.props.value]);
					titleList.push(e[this.props.label]);
				}
			}
			this.$emit('input', selectedData, selectedTextData);
			this.$emit('change', selectedData, selectedTextData);
		},
		removeTag(tag){
			this.$refs.selectTree.setChecked(tag, false);
			this.check();
		},
        // 清除选中
		clearHandle(){
			if(this.multiple){
				this.valueTitle = [];
				this.$emit('input', []);
				this.$emit('change', [], []);
				this.$refs.selectTree.setCheckedKeys([]);
			}else{
				this.valueTitle = '';
				this.$emit('input', '');
				this.$emit('change', '', '');
			}
			this.defaultExpandedKey = [];
			this.clearSelected();
		},
        // 清空选中样式
		clearSelected(){
			const allNode = document.querySelectorAll('#tree-option .el-tree-node');
			for(let i = 0; i < allNode.length; i++){
				allNode[i].classList.remove('is-current');
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.mc-selectTree {
    width: 100%;
}
::v-deep .el-scrollbar{
	border-radius: 8px;
}
.mc-select-tree .el-select-dropdown__item {
    padding: 0;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    /* padding: 0; */
    overflow: hidden;
    overflow-y: auto;
}
.el-select-dropdown__item.selected {
    font-weight: normal;
}
ul li::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: #fff;
}
ul li ::v-deep .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
}
.el-tree-node__label {
    font-weight: normal;
}
.el-tree.single ::v-deep .is-current .el-tree-node__label {
    color: #409eff;
    font-weight: 700;
}
.el-tree.single ::v-deep .is-current .el-tree-node__content .custom-tree-node {
    color: #409eff;
    font-weight: 700;
    &.is-disabled {
        color: #606266;
        font-weight: normal;
    }
}
.el-tree.single ::v-deep .is-current .el-tree-node__children .custom-tree-node {
    color: #606266;
    font-weight: normal;
}
.el-tree.single ::v-deep .is-current .el-tree-node__children .el-tree-node__label {
    color: #606266;
    font-weight: normal;
}
.empty-text {
    margin: 0;
    text-align: center;
    color: #999;
    font-size: 14px;
    background: #fff;
    cursor: auto;
    padding: 0;
    line-height: 24px;
}
.el-link {
    line-height: 24px;
    vertical-align: top;
    padding: 0 20px;
}
</style>